<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<div id="vue" v-clock>
    <div>{{ info.name }}</div>
    <a v-bind:href="info.url">{{info.url}}</a>
    <div>{{ info.page }}</div>
    <div>{{ info.isNonProfit }}</div>
    <div>{{ info.address.street }}</div>
    <div>{{ info.address.city }}</div>
    <div>{{ info.address.country }}</div>
</div>

<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.5.21/dist/vue.min.js"></script>
<!-- 引入 Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#vue",
        // data : 属性 vm
        data: {},
        data(){
          return {
              // 请求的返回参数格式，必须和json字符串一样
              info:{
                  name:"",
                  url: "",
                  page:"",
                  isNonProfit: "",
                  address:{
                      street: null,
                      city: null,
                      country: null,
                  },
              }
          }
        },
        mounted: function () {
            // 钩子函数 hook  链式编程    ES6新特性
            axios.get('./data.json').then(response => {
                this.info = response.data;
                // console.log(response.data);
            }).catch(error => {
                console.log(error);
            }).finally(function () {
                console.log(arguments);
            });
        },
        created: function () {
            console.log(arguments, "arguments");
        },
    })
</script>

</body>
</html>